import React, { Component } from 'react';

// 导入图表组件
import { Column } from '@ant-design/charts';

import { query } from '../../utils/utils';

import { Layout, Breadcrumb, Card } from 'antd';
const { Content } = Layout;

class Bar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      config: {
        title: {
          visible: true,
          text: '月度销售业绩统计',
        },
        description: {
          visible: false,
          text: new Date().getFullYear() + '月度销售业绩统计',
        },
        forceFit: true,
        padding: 'auto',
        xField: 'month',
        yField: 'amount',
        meta: {
          month: { alias: '月份' },
          amount: { alias: '销售额' },
        },
        conversionTag: { visible: true },
      }
    }
  }
  render() {
    return (
      <div>
        <Breadcrumb style={{ margin: '16px 0' }}>
          <Breadcrumb.Item>管理中心</Breadcrumb.Item>
          <Breadcrumb.Item>数据统计</Breadcrumb.Item>
          <Breadcrumb.Item>柱状图</Breadcrumb.Item>
        </Breadcrumb>
        <Content
          className="site-layout-background"
          style={{
            padding: 24,
            margin: 0,
            minHeight: 280,
          }}
        >
          <Column {...this.state.config} />
        </Content>
      </div>
    );
  }
  componentWillMount() {
    this.getData();
  }
  getData() {
    query(`/index.php?c=charts&a=index`).then(res => {
      if (res.errcode == 0) {
        const data = [];
        res.data.forEach((item, index) => {
          data.push({
            month: ++index + '月',
            amount: parseFloat(item.total)
          });
        });
        this.setState({
          config: Object.assign(this.state.config, { data })
        });
      }
    })
  }
}

export default Bar;
